<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('选择场次配置')" />
    <style>
        .config-card {
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 20px;
            height: 100%;
        }
        .config-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
            border-color: #1890ff;
        }
        .config-card.selected {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        .config-card .card-header {
            padding: 15px;
            border-bottom: 1px solid #e8e8e8;
            font-weight: bold;
        }
        .config-card .card-body {
            padding: 15px;
        }
        .config-info {
            font-size: 14px;
            color: #666;
            line-height: 1.8;
        }
        .config-status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-enabled {
            background-color: #f6ffed;
            color: #52c41a;
        }
        .status-disabled {
            background-color: #f5f5f5;
            color: #999;
        }
        #startExamBtn {
            margin-top: 20px;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <form id="config-form">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="input-group">
                                                <span class="input-group-addon">配置名称</span>
                                                <input type="text" class="form-control" id="configName" placeholder="请输入配置名称">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group">
                                                <span class="input-group-addon">考试类型</span>
                                                <select class="form-control" id="examType" disabled>
                                                    <option value="1" selected>单人答题</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <button type="button" class="btn btn-primary" onclick="searchConfigs()"><i class="fa fa-search"></i> 搜索</button>
                                            <button type="button" class="btn btn-warning" onclick="resetSearch()"><i class="fa fa-refresh"></i> 重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                        <div class="row mt-3">
                            <div class="col-sm-12">
                                <div class="alert alert-info">
                                    <i class="fa fa-info-circle"></i> 请选择一个场次配置开始答题，只显示启用的单人答题配置
                                </div>
                            </div>
                        </div>
                        
                        <div class="row" id="configContainer">
                            <!-- 配置卡片将通过JavaScript动态加载 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    
    <script type="text/javascript">
        var selectedConfig = null;
        
        $(function() {
            // 初始化加载场次配置
            loadConfigs();
        });
        
        // 加载场次配置
        function loadConfigs() {
            var data = {
                examType: 1, // 单人答题
                status: 1    // 启用状态
            };
            
            $.ajax({
                url: ctx + "system/exam/config/list",
                type: "post",
                data: data,
                success: function(result) {
                    if (result.code == 0) {
                        renderConfigs(result.rows);
                    } else {
                        $.modal.alertError("加载场次配置失败: " + result.msg);
                    }
                },
                error: function() {
                    $.modal.alertError("加载场次配置失败");
                }
            });
        }
        
        // 搜索场次配置
        function searchConfigs() {
            var configName = $('#configName').val();
            var examType = $('#examType').val();
            
            var data = {
                examType: examType || 1, // 默认单人答题
                status: 1,               // 启用状态
                configName: configName
            };
            
            $.ajax({
                url: ctx + "system/exam/config/list",
                type: "post",
                data: data,
                success: function(result) {
                    if (result.code == 0) {
                        renderConfigs(result.rows);
                    } else {
                        $.modal.alertError("搜索场次配置失败: " + result.msg);
                    }
                },
                error: function() {
                    $.modal.alertError("搜索场次配置失败");
                }
            });
        }
        
        // 重置搜索
        function resetSearch() {
            $('#configName').val('');
            $('#examType').val('');
            loadConfigs();
        }
        
        // 渲染场次配置
        function renderConfigs(configs) {
            var html = '';
            
            for (var i = 0; i < configs.length; i++) {
                var config = configs[i];
                html += '<div class="col-md-6 col-lg-4">';
                html += '  <div class="config-card" onclick="selectConfig(' + config.id + ', this)">';
                html += '    <div class="card-header bg-white">';
                html += '      <h4>' + config.configName + '</h4>';
                html += '    </div>';
                html += '    <div class="card-body">';
                html += '      <div class="config-info">';
                html += '        <i class="fa fa-list-ol"></i> 题目数量：' + config.questionCount + '题<br>';
                html += '        <i class="fa fa-signal"></i> 难度：' + getDifficultyText(config.difficulty) + '<br>';
                html += '        <i class="fa fa-clock-o"></i> 创建时间：' + (config.createTime ? config.createTime.substr(0, 10) : '') + '<br>';
                html += '      </div>';
                html += '      <span class="config-status status-enabled">启用</span>';
                html += '    </div>';
                html += '  </div>';
                html += '</div>';
            }
            
            if (configs.length === 0) {
                html = '<div class="col-sm-12"><div class="alert alert-warning text-center">暂无可用的场次配置</div></div>';
            }
            
            $('#configContainer').html(html);
        }
        
        // 获取难度文本
        function getDifficultyText(difficulty) {
            switch(difficulty) {
                case 1: return '简单';
                case 2: return '中等';
                case 3: return '困难';
                default: return '全部';
            }
        }
        
        // 选择场次配置
        function selectConfig(configId, element) {
            // 清除之前选中的样式
            $('.config-card').removeClass('selected');
            
            // 添加选中样式
            $(element).addClass('selected');
            
            // 记录选中的配置ID
            selectedConfig = configId;
        }
        
        // 关闭窗口
        function closeItem() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
    </script>
</body>
</html>